<template>
  <h3>{{ person }}</h3>
  <br>
  <h3>当前Person中name的值:{{ person.name }}</h3>
  <button @click="person.name += '~'">Name 后加个 ~ </button>
  <h3>当前Person中age的值:{{ person.age }}</h3>
  <button @click="person.age++">年龄 ++ </button>
  <h3>当前Person-job-job1的salary值:{{ person.job.job1.salary }}K</h3>
  <button @click="person.job.job1.salary++">job1涨薪( shallowReactive 浅层次的响应式，salary 不会变)</button>

</template>

<script>
import { ref, shallowReactive, shallowRef } from 'vue'

export default {
  name: 'School-Comp',
  setup() {
    
    // 数据
    let person = shallowReactive({
      name: "张三",
      age: 18,
      job: {
        job1: {
          salary: 10,
        }
      }
    });

    let obj = ref({
      x: 0
    })
    console.log("----- obj", obj)

    let obj1 = shallowRef({
      x: 0
    })

    console.log("----- obj1", obj1)

    return {
      person,
      obj
    }
  },
}
</script>

<style></style>
